<style scoped>
.item {
  background-color: #f2f6fc;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding:10px 40px 30px;
  margin-bottom: 20px;
}
.item > h2{
    font-size: 16px;
    text-align: center;
    padding:20px 10px 10px;
}
.item > .msg {
    font-size:12px;
    text-align: center;
}
.item > .msg > span{
    color: #5FC6E2;
}
.item > .content {
    font-size:16px;
    font-weight: 700;
    padding:10px 0;
}
</style>
<template>
  <div class="item">
      <h2>{{title}}</h2>
      <p class="msg">
          作者：<span>{{author}}</span> - 
          时间：<span>{{time}}</span> - 
          阅读：<span>{{read}}</span> - 
          评论：<span>{{comment}}</span>
      </p>
      <p class="content">{{content}}</p>
      <read-article @click="$emit('click')"></read-article>
  </div>
</template>

<script>
import readArticle from './readArticle.vue';
export default {
  components: { readArticle },
    props:{
        title:{
            type:String,
            default:'HTML语义化'
        },
        author:{
            type:String,
            default:'admin'
        },
        time:{
            type:String,
            default:'2020年12月8日10:24:18'
        },
        read:{
            type:Number,
            default:10
        },
        comment:{
            type:Number,
            default:5
        },
        content:{
            type:String,
            default:'HTML语义化标签的使用-第一课'
        }

    }
};
</script>